<!DOCTYPE HTML>
<html>
<head>
    <!-- twitter bootstrap CSS stylesheet - included to make things pretty, not needed or used by cornerstone -->
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

    <!-- cornerstone css - provides some useful css classes -->
    <link href="../../dist/cornerstone.css" rel="stylesheet">
</head>
<body>
<div class="container">

<h1>
    changeimage/index.html
</h1>
This is an example of changing the image displayed in an element.  This could be used
to show different key images or a stack of images (e.g. MRI series).  Use the mouse wheel
to change between images or press the buttons below.
<br>
<br>

<div id="dicomImage" style="width:512px;height:512px"
     class="cornerstone-enabled-image"
     oncontextmenu="return false"
     unselectable='on'
     onselectstart='return false;'
     onmousedown='return false;'>
</div>

<button id="imageButton1" type="button" class="btn btn-default">Image #1</button>
<button id="imageButton2" type="button" class="btn btn-default">Image #2</button>

</div>
</body>

<!-- cornerstone depends on jQuery so it must be loaded first-->
<script src="../jquery.min.js"></script>

<!-- include the cornerstone library -->
<script src="../../dist/cornerstone.js"></script>

<!-- include special code for these examples which provides images -->
<script src="../exampleImageIdLoader.js"></script>

<script>

    $(document).ready(function() {
        var element = $('#dicomImage').get(0);
        cornerstone.enable(element);

        var imageIds = [
            'example://1',
            'example://2'];

        var currentImageIndex = 0;

        // show image #1 initially
        function updateTheImage(imageIndex) {
            currentImageIndex = imageIndex;
            cornerstone.loadImage(imageIds[currentImageIndex]).then(function(image) {
                cornerstone.displayImage(element, image);
            });
        };

        updateTheImage(0);

        // Add event handlers to change images
        $('#imageButton1').click(function (e) {
            updateTheImage(0);
        });

        $('#imageButton2').click(function (e) {
            updateTheImage(1);
        });

        $('#dicomImage').on('mousewheel DOMMouseScroll', function (e) {
            // Firefox e.originalEvent.detail > 0 scroll back, < 0 scroll forward
            // chrome/safari e.originalEvent.wheelDelta < 0 scroll back, > 0 scroll forward
            if (e.originalEvent.wheelDelta < 0 || e.originalEvent.detail > 0) {
                if (currentImageIndex == 0) {
                    updateTheImage(1);
                }
            } else {
                if (currentImageIndex == 1) {
                    updateTheImage(0);
                }
            }
            //prevent page fom scrolling
            return false;
        });
    });

</script>
</html>
